<script lang="ts" setup>
import { useOverviewStore } from '~/stores/request';
import { useSystemStore } from '~/stores/system'
const currRow = ref({})
const visible = ref(false)
const route = useRoute()
const table = route.params.table as string
const searchRef =  ref<HTMLElement | null>(null)
const searchHeight = ref(0)
const emptyHeight = ref(0)
const syStore = useSystemStore()
const overviewStore = useOverviewStore()
const params = reactive({
  table,
  pager: {
    no: 1,
    size: 10,
    where: {},
    orderBy: []
  }
})
const list = usePaginateEntityPlus({
  params,
  immediate: true
})
const deleteIt = useDeleteEntity({})
const updateIt = useUpdateEntity({})
const saveIt = useSaveEntity({})
const handleEdit = (scope: any) => {
  currRow.value = scope.row
  visible.value = true
}
const onCommit = (data: any) => {
  if (!data[syStore.primaryKey]) {
    saveIt.refresh({
      table,
      data
    })
  } else {
    updateIt.refresh({
      table,
      data
    })
  }
  refresh()
}
const onConfirm = (data: any) => {
  deleteIt.refresh({
    table,
    id: data.row.id
  })
  refresh()
}
const onQuery = (data: any) => {
  params.pager.where = data
  refresh()
}

const onCreate = () => {
  currRow.value = {}
  visible.value = true
}

const pageChange = () => {
  refresh()
}

const refresh = () => {
  list.refresh()
  overviewStore.state?.refresh()
}

const cols = computed(() => {
  const exclude = syStore.excludeKeys
  return list.data.columns.filter((k: any) => {
    return !exclude.includes(k.prop)
  })
})

const sortChange = (orderBy: any) => {
  params.pager.orderBy = orderBy
  list.refresh()
}

watch(() => list.data, ({ primaryKey }) => {
  syStore.setPrimaryKey(primaryKey)
})

onMounted(() => {
  setTimeout(() => {
    const viewportHeight= window.innerHeight
    const searchHeight = searchRef.value.clientHeight
    emptyHeight.value = viewportHeight - searchHeight - 48
  }, 200);
})

</script>

<template>
  <template v-if="list.data">
    <RecordDialog v-model:visible="visible" :data="currRow" :columns="cols" @commit="onCommit" />
    <div class="flex flex-col h-ful">
      <div ref="searchRef" class="flex-none">
        <Search :columns="cols" @onCreate="onCreate" @onQuery="onQuery" />
      </div>
      <div v-if="list.data.data.length > 0" class="flex-1">
        <Table @pageChange="pageChange" @sortChange="sortChange" :restRef="searchRef" :total="list.data.total"
          :data="list.data.data" :columns="cols" v-model:no="params.pager.no" v-model:size="params.pager.size">
          <template #operation="scope">
            <div class="flex justify-around">
              <Button @click="handleEdit(scope)" icon="edit" :fill="true">
                {{ $t('edit') }}
              </Button>
              <ConfirmTip @ok="onConfirm(scope)">
                <Button icon="del" :fill="true" class="ml-10px">
                  {{ $t('delete') }}
                </Button>
              </ConfirmTip>
            </div>
          </template>
        </Table>
      </div>
      <div class="flex-1" v-else>
        <Empty :height="emptyHeight" />
      </div>
    </div>
  </template>
  <template v-else>
    <div v-loading="true"></div>
  </template>
</template>
